<style type="text/css">
    /* CSS for the traditional context menu */
    #contextMenu {
        z-index: 10001;
        position: absolute;
        left: 5px;
        border: 1px solid #444;
        background-color: #F5F5F5;
        display: none;
        box-shadow: 0 0 10px rgba( 0, 0, 0, .4 );
        font-size: 12px;
        font-family: sans-serif;
        font-weight: bold;
    }

    #contextMenu ul {
        list-style: none;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
    }

    #contextMenu li a {
        position: relative;
        min-width: 60px;
        color: #444;
        display: inline-block;
        padding: 6px;
        text-decoration: none;
        cursor: pointer;
    }

    #contextMenu li:hover {
        background: #CEDFF2;
        color: #EEE;
    }

    #contextMenu li ul li {
        display: none;
    }

    #contextMenu li ul li a {
        position: relative;
        min-width: 60px;
        padding: 6px;
        text-decoration: none;
        cursor: pointer;
    }

    #contextMenu li:hover ul li {
        display: block;
        margin-left: 0px;
        margin-top: 0px;
    }
</style>
<div class="col-sm-12">
    <div class="col-sm-2" style="margin-bottom: 10px;">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入查询节点..." ng-model="$ctrl.searchInput" style="height: 36px;" ng-keyup="myKeyup($event)">
            <span class="input-group-addon" title="查询" ng-click="searchNode()">
                <i class="fa fa-search"></i>
            </span>
        </div> 
    </div>
    <div class="col-sm-12">
        <div id="myDiagramFlow" style="background-color: white; border: solid 1px black; width: 100%; height: 550px"></div>
        <div id="contextMenu">
            <ul ng-hide="isReqFlow">
                <li id="move" ng-click="moveBtn()"><a href="javascript:void(0);"><i class="fa fa-paw"></i> 移动</a></li>
                <li id="addFrame" ng-click="addFrameBtn()"><a href="javascript:void(0);"><i class="fa fa-plus"></i> 添加架构</a></li>
                <li id="addFlow" ng-click="addFlowBtn()"><a href="javascript:void(0);"><i class="fa fa-plus"></i> 添加流程</a></li>
                <li id="edit" ng-click="editBtn()"><a href="javascript:void(0);"><i class="fa fa-cog"></i> 修改标题</a></li>
                <li id="draw" ng-click="drawBtn()"><a href="javascript:void(0);"><i class="fa fa-tag"></i> 绘制流程</a></li>
                <li id="history" ng-click="historyBtn()"><a href="javascript:void(0);"><i class="fa fa-mail-reply"></i> 历史记录</a></li>
                <li id="removeNode" ng-click="removeBtn()"><a href="javascript:void(0);"><i class="fa fa-trash"></i> 删除</a></li>
                <li id="toSort" ng-click="sortBtn()"><a href="javascript:void(0);"><i class="fa fa-sort-amount-asc"></i> 排序</a></li>
            </ul>
            <ul ng-show="isReqFlow">
                <li id="addReqFrame" ng-click="addReqFrameBtn()"><a href="javascript:void(0);"><i class="fa fa-plus"></i> 添加架构</a></li>
                <li id="addReqFlow" ng-click="addReqFlowBtn()"><a href="javascript:void(0);"><i class="fa fa-plus"></i> 添加流程</a></li>
                <li id="copyFlow" ng-click="copyFlowBtn()"><a href="javascript:void(0);"><i class="fa fa-copy"></i> 复制流程</a></li>
                <li id="editFlow" ng-click="editFlowBtn()"><a href="javascript:void(0);"><i class="fa fa-edit"></i> 修改标题</a></li>
                <li id="relate" ng-click="relateFlowBtn()"><a href="javascript:void(0);"><i class="fa fa-code-fork"></i> 拉分支</a></li>
                <li id="relive" ng-click="reliveFlowBtn()"><a href="javascript:void(0);"><i class="fa fa-chain-broken"></i> 重置</a></li>
                <li id="remove" ng-click="removeFlowBtn()"><a href="javascript:void(0);"><i class="fa fa-trash"></i> 删除</a></li>
            </ul>
        </div>
    </div>
    <div class="col-sm-12" style="margin-top: 10px;">
        <button class="btn btn-default" ng-click="zoomToFit()">缩小</button>
        <button class="btn btn-default" ng-click="centerRoot()">居中</button>
    </div>
</div>